<template>
  <el-drawer
    v-model="checkOpt.show"
    :title="checkOpt.title"
    direction="ltr"
    :before-close="handleClose"
    @opened="openfn"
  >
    <el-timeline>
      <el-timeline-item :timestamp="checkOpt.data.creationTime" placement="top">
        <el-card>
          <h4>创建人： {{ checkOpt.data.creatorName }}</h4>
          <p v-if="!checkOpt.data.lastModifierName">
            <el-button type="primary" @click="goPreview">详情预览</el-button>
            <el-button type="warning" @click="closePreview" v-show="openId"
              >关闭预览</el-button
            >
          </p>
        </el-card>
      </el-timeline-item>
      <el-timeline-item
        :timestamp="checkOpt.data.lastModificationTime"
        placement="top"
        v-if="checkOpt.data.lastModifierName"
      >
        <el-card>
          <h4>最后修改人： {{ checkOpt.data.lastModifierName }}</h4>
          <p>
            <el-button type="primary" @click="goPreview">详情预览</el-button>
            <el-button type="warning" @click="closePreview" v-show="openId"
              >关闭预览</el-button
            >
          </p>
        </el-card>
      </el-timeline-item>
      <el-timeline-item :timestamp="date" placement="top">
        <el-card>
          <h4>审核人： {{ store?.authUser?.user?.userName ?? "" }}</h4>
          <el-form label-width="100" :model="form" :rules="rules" ref="formRef">
            <el-form-item label="审核意见" prop="result">
              <el-radio-group v-model="form.result">
                <el-radio label="通过" :value="true"></el-radio>
                <el-radio label="不通过" :value="false"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" v-model="form.remark"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submit" :loading="loading"
                >提 交</el-button
              >
            </el-form-item>
            <p></p>
          </el-form>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </el-drawer>
</template>
<script setup>
import { reactive, ref } from "vue";
import dayjs from "dayjs";
import userStore from "@/store/userStore";
import { putFistReviewResult, putSecondReviewResult } from "@/api/recipe";

let props = defineProps({
  checkOpt: {
    type: Object,
    default: () => {},
  },
});

let emit = defineEmits(["closeDraw"]);

const store = userStore();

let form = reactive({
  deviceCode: "",
  recipeNo: "",
  version: "",
  result: null,
  remark: "",
});
let formRef = ref();
let loading = ref(false);
let date = dayjs().format("YYYY/MM/DD");

let rules = {
  result: [{ required: true, message: "请选择审核意见", trigger: "change" }],
  remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
};

let openId = ref(null);
function goPreview() {
  let temp = JSON.parse(props.checkOpt.data.jsTempStr);
  temp.reelConfig.version = props.checkOpt.data.version;
  temp.reelConfig.recipeNo = props.checkOpt.data.recipeNo;
  sessionStorage.setItem("reel-state", JSON.stringify(temp));
  openId.value = window.open(
    `?recipeId=${props.checkOpt.data.recipeName}#/pdf/preview`
  );
}
function closePreview() {
  openId.value.close();
  ElMessage.success("关闭成功");
  openId.value = null;
}

function handleClose() {
  openId.value?.close();
  openId.value = null;
  for (let key in form) {
    form[key] = null;
  }
  emit("closeDraw");
}

async function submit() {
  try {
    formRef.value.validate(async (valid) => {
      if (valid) {
        loading.value = true;
        let res = await putFistReviewResult(form);
        if (res && form.result) {
          await putSecondReviewResult(form);
        }
        ElMessage.success("提交成功");
        loading.value = false;
        emit("closeDraw", true);
      }
    });
  } catch (e) {
    ElMessage.error("提交失败");
    loading.value = false;
  }
}

function openfn() {
  form.deviceCode = props.checkOpt.data.deviceCode;
  form.recipeNo = props.checkOpt.data.recipeNo;
  form.version = props.checkOpt.data.version;
}
</script>
